<template>
  <div>
    <div class="addBody">
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">基本信息</div>
      </el-form>
      <el-form :inline="true" class="addMessage" ref="form" :model="lookMessage" label-width="80px">
        <el-form-item label="站点编号:">
          <el-input class="readonlyMessage smallMessage" v-model="lookMessage.pid" readonly></el-input>
        </el-form-item>
        <el-form-item label="站点名称:">
          <el-input class="readonlyMessage smallMessage" v-model="lookMessage.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="所属项目:">
          <el-input class="readonlyMessage smallMessage" v-model="lookMessage.project_no" readonly></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">附加信息</div>
      </el-form>
      <el-table :data="lookEquip" stripe fit highlight-current-row
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
        <el-table-column
          prop="equip_cid"
          label="出厂编号"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="name_label"
          label="起重机名称"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="brand_label"
          label="品牌"
          width="250">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="work_level_label"
          label="工作级别"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="delivery_time"
          label="创建时间"
          sortable>
        </el-table-column>
      </el-table>
      <el-table :data="lookIntel" stripe fit highlight-current-row
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9'}">
        <el-table-column
          prop="asset_no"
          label="物联网关编号"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="asset_name"
          label="物联网关名称"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌"
          width="250">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="sn"
          label="序列号"
          sortable
          width="250">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          sortable
          width="160">
        </el-table-column>
        <el-table-column
          prop="asset_status"
          label="状态"
          sortable>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        lookMessage: {},
        lookEquip: [],
        lookIntel: [],
        gateway: [{
          id: 'FK',
          name: '名字要响亮',
          brand: '华为',
          model: '麒麟980',
          serialNumber: 'BH87031003',
          time: '2018-02-19 15:49:23',
          state: '未使用'
        }],
        getOnceSiteBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_get',
          pid: ''
        }
      }
    },
    created() {
      this.getTime()
      this.queryData()
    },
    methods: {
      getTime() {
        var oDate = new Date()
        this.lookMessage.addtime = oDate.getFullYear() + '-' + (oDate.getMonth() + 1) + '-' + oDate.getDate() + ' ' + oDate.getHours() + ':' + oDate.getMinutes() + ':' + oDate.getSeconds()
      },
      // 查看信息
      queryData() {
        this.getOnceSiteBody.pid = this.$route.query.pid
        // 获取站点列表总览
        axios.post('/station', this.getOnceSiteBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.data.asset.asset_status === 0) {
            res.data.data.asset.asset_status = '未启用'
          } else {
            res.data.data.asset.asset_status = '已启用'
          }
          if (res.data.data.equip.cid) {
            this.lookEquip.push(res.data.data.equip)
          }
          if (res.data.data.asset.asset_no) {
            this.lookIntel.push(res.data.data.asset)
          }
          this.lookMessage = res.data.data
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
  .addBody{
    width: 100%;
    min-height: 500px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #e0e0e0;
  }
  /deep/ .addMessage {
    margin: 20px 0px;
    width: 500px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .smallMessage {
    width: 256px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .cityMessage {
    width: 624px;
  }
  /deep/ .coordinateMessage {
    width: 624px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 20px;
  }
  /deep/ .el-table--border {
    margin-top: 20px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
    padding: 4px;
  }
  /deep/ .el-table--border th {
    padding: 3px;
  }
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F0F2F7;
  }
</style>
